<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				backgroundColor: '#fff',
			}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content text-bold" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					志愿者申请
				</view>
				<view class="action" style="color: #4cbd66;" @click="jump('/pages/volunteer/list')">
					申请列表
				</view>
			</view>
		</view>
		<!-- <view class="h_10"></view> -->
		<view :class="'color' + state" class="tips" v-if="state === 0 || state === 1 || state === 2">
					{{msg}}
				</view>
		<view class="conter">
			<view class="conterFlex">
				<view class="flexLeft">姓名</view>
				<view class="flexRight">
					<input placeholder="请输入姓名" class="int" placeholder-class="intp" v-model="realname" />
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">手机号</view>
				<view class="flexRight">
					<input placeholder="请输入手机号" class="int" placeholder-class="intp" v-model="mobile" type="number"
						maxlength="11" />
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">性别</view>
				<view class="flexRight">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" active-color="#4cbd66">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">年龄</view>
				<view class="flexRight">
					<input placeholder="请输入您的年龄" class="int" placeholder-class="intp" v-model="age" type="number" />
				</view>
			</view>
			<view class="conterFlex" @tap="$refs.wanlAddressRef.open()">
				<view class="flexLeft">所在地区</view>
				<view class="flexRight">
					<input placeholder="请选择您的所在地区" disabled="true" class="int" placeholder-class="intp"
						v-model="formatted_address" type="text" />
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">详细地址</view>
				<view class="flexRight">
					<view class="flexRightText">
						<textarea placeholder="请输入详细地址" class="textarea" v-model="address"></textarea>
					</view>
				</view>
			</view>
			<view class="conterFlex">
				<view class="flexLeft">身份证</view>
				<view class="flexRight">
					<input placeholder="请输入您的身份证号码" maxlength="18" class="int" placeholder-class="intp"
						v-model="idcard_no" />
				</view>
			</view>

			<view class="conterFlex">
				<view class="flexLeft">身份证照片</view>
				<view class="flexRight">
					<view class="rightLeft" @click="chooseImg('idcard_front')" v-if="!idcard_front">
						<view class="iconfont icon-xiangji1fill"></view>
						<view>上传正面</view>
					</view>
					<view class="rightLeft" @tap="previewImage(idcard_front)" v-else>
						<image :src="idcard_front" mode="aspectFill" class="rightLeftImg"></image>
						<view class="cu-tag bg-red" @tap.stop="close('idcard_front')" v-if="judgeShow">
							<text class='wlIcon-shanchu2'></text>
						</view>
					</view>
					<view class="rightRight" @click="chooseImg('idcard_back')" v-if="!idcard_back">
						<view class="iconfont icon-xiangji1fill"></view>
						<view>上传反面</view>
					</view>
					<view class="rightRight" @tap="previewImage(idcard_back)" v-else>
						<image :src="idcard_back" mode="aspectFill" class="rightRightImg"></image>
						<view class="cu-tag bg-red" @tap.stop="close('idcard_back')" v-if="judgeShow">
							<text class='wlIcon-shanchu2'></text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="conterFlex">
				<view class="flexLeft">健康证照片</view>
				<view class="flexRight">
					<view class="rightLeft" @click="chooseImg('health_image')" v-if="!health_image">
						<view class="iconfont icon-xiangji1fill"></view>
						<view>上传正面</view>
					</view>
					<view class="rightLeft" @tap="previewImage(health_image)" v-else>
						<image :src="health_image" mode="aspectFill" class="rightLeftImg"></image>
						<view class="cu-tag bg-red" @tap.stop="close('health_image')" v-if="judgeShow">
							<text class='wlIcon-shanchu2'></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view class="conterFlex">
				<view class="flexLeft">附件</view>
				<view class="flexRight">
					<view class="rightLeft1">
						<view class="iconfont icon-add"></view>
						<view>上传简历</view>
					</view>
				</view>
			</view> -->
			<view class="conterFlex">
				<view class="flexLeft">个人简介</view>
				<view class="flexRight">
					<view class="flexRightText">
						<textarea placeholder="请输入您的个人优势" class="textarea" v-model="introduce"></textarea>
					</view>
				</view>
			</view>
			<view class="conterFlex" v-if="state == 2">
				<view class="flexLeft">拒绝理由</view>
				<view class="flexRight">
					<view class="flexRightText">
						<textarea placeholder="请输入您的个人优势" disabled="true" class="textarea"
							v-model="refuse_reason"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="zw"></view>
		<view class="footer" v-if="judgeShow">
			<view class="footerBtn" @click="entry()">{{state == 0?'立即申请':'继续申请'}}</view>
		</view>
		<wanl-select-address :provinvial="provinvial" ref="wanlAddressRef" :address="addressStr"
			@change="change" @close="close"></wanl-select-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '男',
						index: 1
					},
					{
						name: '女',
						index: 2
					}
				],
				value: '',
				realname: '', // 真实姓名
				mobile: '', // 手机号
				sex: '', // 性别（1：男；2：女）
				age: '', // 年龄
				idcard_no: '', // 身份证号码【限制18位】
				introduce: '', // 自我介绍
				idcard_front: '', // 身份证正面照
				idcard_back: '', // 身份证反面照,
				health_image:'',
				province: '', //省份
				city: '', // 城市
				district: '', // 县
				address: '', //详细地址
				lng: '', // 经度
				lat: '', // 纬度
				street: '',
				state: '', // 0 审核中 1审核通过 2审核失败
				refuse_reason: '', // 拒绝理由
				judgeShow: true,
				addressStr: {
					province: {
						id: '',
						name: '',
						pid: ''
					},
					city: {
						id: '',
						name: '',
						pid: ''
					},
					area: {
						id: '',
						name: '',
						pid: ''
					},
					street: {
						id: '',
						name: '',
						pid: ''
					},
				},
				formatted_address: '',
				provinvial: [],
				msg: '',
				flag: true,
			}
		},
		onLoad() {
			this.area()
			this.getInfo()

		},
		methods: {
			close() {
				if(!this.flag) {
					this.$refs.wanlAddressRef.setData(this.addressStr);
				}
			},
			change(value) {
				this.flag = false
				if(!value.street.name) return false;
				let address =
					`${value.province.name || ''}${value.city.name || ''}${value.area.name || ''}${value.street.name || ''}`;
				this.formatted_address = address;
				uni.request({
					url: '/member/address/getAddressLatlng',
					data: {
						key: this.$config.amapkey,
						address: address,
						city: value.city.name,
						output: 'JSON'
					},
					success: (res) => {
						this.flag = true
						let location = res.data[0].location.split(',');
						let lng = location[0];
						let lat = location[1];
						this.province = value.province.id;
						this.city = value.city.id;
						this.district = value.area.id;
						this.street = value.street.id;
						this.lng = lng;
						this.lat = lat;
						
						this.addressStr = {
							province: {id:value.province.id,name:value.province.name,pid:0},
							city: {id:value.city.id,name:value.city.name,pid:value.province.id},
							area: {id:value.area.id,name:value.area.name,pid:value.city.id},
							street: {id:value.street.id,name:value.street.name,pid:value.area.id}
						}
						this.$refs.wanlAddressRef.setData(this.addressStr);
					}
				})
			},
			area() {
				uni.request({
					url: '/wanlshop/common/area',
					success: (res) => {
						if (res.data.length > 0) {
							this.provinvial = res.data
						} else {
							this.$wanlshop.msg('数据表area为空，请在后台安装示例插件')
						}
					}
				});
			},

			jump(url) {
				this.$wanlshop.auth(url)
				// uni.navigateTo({
				// 	url: url
				// })
			},
			async verifiedInfo(option) {
				let data = await uni.request({
					url: '/wanlshop/User/verifiedInfo',
					method: 'POST'
				})
				let users = this.$store.state.user;
				// let users = await uni.request({
				// 	url: '/member/user/info',
				// 	method: 'POST'
				// });
				// console.log(data)
				// console.log("users1", users[1].data.infos)
				console.log("users1", users)
				if (users.infos) {
					this.realname = users.infos.realname // 真实姓名
					this.idcard_no = users.infos.idcard_no // 身份证号码【限制18位】
					this.idcard_front = users.infos.idcard_front // 身份证正面照
					this.idcard_back = users.infos.idcard_back // 身份证反面照
					this.mobile = users.infos.mobile // 手机号
					this.sex = users.infos.sex // 性别（1：男；2：女）
					this.value = users.infos.sex == 1 ? '男' : '女'
					this.age = users.infos.age // 年龄
					this.introduce = users.infos.introduce // 自我介绍
					this.city = users.infos.city;
					this.address = users.infos.address
					this.formatted_address = users.infos.address_detail
					this.province = users.infos.province;
					this.district = users.infos.district;
					this.street = users.infos.street;
					this.lng = users.infos.lng;
					this.lat = users.infos.lat;
				} else {
					let verifiedInfo = data[1].data
					this.realname = verifiedInfo.truename // 真实姓名
					this.idcard_no = verifiedInfo.idcard // 身份证号码【限制18位】
					this.idcard_front = verifiedInfo.front_card_image // 身份证正面照
					this.idcard_back = verifiedInfo.back_card_image // 身份证反面照
				}

			},
			getInfo() {
				uni.request({
					url: '/addons/volunteer/api.userapply/info',
					data: {
						type: 5
					},
					method: 'POST',
					success: res => {
						console.log("res", res)
						if (res.data) {
							this.realname = res.data.realname // 真实姓名
							this.mobile = res.data.mobile // 手机号
							this.sex = res.data.sex // 性别（1：男；2：女）
							this.value = res.data.sex == 1 ? '男' : '女'
							this.age = res.data.age // 年龄
							this.idcard_no = res.data.idcard_no // 身份证号码【限制18位】
							this.introduce = res.data.introduce // 自我介绍
							this.idcard_front = res.data.idcard_front // 身份证正面照
							this.idcard_back = res.data.idcard_back // 身份证反面照
							let addressData = res.data.city_name;
							this.formatted_address =
								`${addressData.province}${addressData.city}${addressData.district}${addressData.street}`
							this.address = res.data.address
							this.state = res.data.state
							this.refuse_reason = res.data.refuse_reason
							let data = res.data;
							console.log("data", data)
							this.addressStr = {
								province: {
									id: data.province,
									name: data.city_name.province,
									pid: 0
								},
								city: {
									id: data.city,
									name: data.city_name.city,
									pid: data.province
								},
								area: {
									id: data.district,
									name: data.city_name.district,
									pid: data.city
								},
								street: {
									id: data.street,
									name: data.city_name.street,
									pid: data.district
								}
							}
							if (res.data.state == 1 || res.data.state == 0) {
								this.judgeShow = false
							} else {
								this.judgeShow = true
							}
							if (res.data.state === 0) {
								this.msg = '您当前正在审核中,请耐心等待'
							} else if (res.data.state === 1) {
								this.msg = '审核已通过'
							} else if (res.data.state === 2) {
								this.msg = `审核未通过`
							}
						} else {
							this.verifiedInfo()
						}

					}
				});
			},

			entry() {
				uni.request({
					url: '/addons/volunteer/api.userapply/apply',
					data: {
						realname: this.realname, // 真实姓名
						mobile: this.mobile, // 手机号
						sex: this.sex, // 性别（1：男；2：女）
						age: this.age, // 年龄
						idcard_no: this.idcard_no, // 身份证号码【限制18位】
						introduce: this.introduce, // 自我介绍
						idcard_front: this.idcard_front, // 身份证正面照
						idcard_back: this.idcard_back, // 身份证反面照
						province: this.province, //省份
						city: this.city, // 城市
						district: this.district, // 县
						address: this.address, //详细地址
						lng: this.lng, // 经度
						lat: this.lat, // 纬度
						street: this.street,
						type: 5,
						health_image:this.health_image
					},
					method: 'POST',
					success: res => {
						uni.showToast({
							title: '申请成功',
							icon: 'none',
							position: true
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					}
				});
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				if (e == '男') {
					this.sex = 1
				} else {
					this.sex = 2
				}
			},
			chooseImg(val) { //选择图片
				console.log("cxzczcz", val)
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 1,
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: data => {
													this[val] = JSON.parse(data.data).data.fullurl
												},
												fail: error => {
													this.$wanlshop.msg(JSON.parse(error.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				})
			},


			close(e) {
				if (e == 'idcard_front') {
					this.idcard_front = ''
				} else {
					this.idcard_back = ''
				}
			},
			previewImage(image) {
				var imgArr = [];
				// for (var item of image) {
				// 	imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				// }
				imgArr = image.split()
				uni.previewImage({
					urls: imgArr,
					current: 1,
					indicator: 'number'
				});
			},
		}
	}
</script>

<style lang="scss">
	.h_10 {
		width: 100%;
		height: 10rpx;
	}

	.conter {
		background: #fff;
		padding: 0 30rpx;

		.conterFlex {
			padding: 30rpx 0;
			display: flex;
			// align-items: center;

			.flexLeft {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.flexRight {
				width: 452rpx;
				height: auto;
				margin-left: auto;
				display: flex;

				.int {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}

				.intp {
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #AAAAAA;
				}

				.rightLeft {
					width: 212rpx;
					height: 128rpx;
					border: 2rpx dashed #888888;
					text-align: center;
					color: #999999;
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					position: relative;

					.iconfont {
						margin-top: 32rpx;
					}

					.rightLeftImg {
						width: 100%;
						height: 100%;
					}

					.cu-tag {
						position: absolute;
						right: 0;
						top: 0;
						border-bottom-left-radius: 3px;
						padding: 3px 6px;
						height: auto;
						background-color: rgba(0, 0, 0, 0.5);
					}
				}

				.rightRight {
					width: 212rpx;
					height: 128rpx;
					border: 2rpx dashed #888888;
					margin-left: auto;
					text-align: center;
					color: #999999;
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					position: relative;

					.iconfont {
						margin-top: 32rpx;
					}

					.rightRightImg {
						width: 100%;
						height: 100%;
					}

					.cu-tag {
						position: absolute;
						right: 0;
						top: 0;
						border-bottom-left-radius: 3px;
						padding: 3px 6px;
						height: auto;
						background-color: rgba(0, 0, 0, 0.5);
					}
				}

				.rightLeft1 {
					width: 144rpx;
					height: 144rpx;
					border: 2rpx dashed #888888;
					text-align: center;
					color: #999999;
					font-size: 22rpx;
					font-family: PingFang SC-Medium, PingFang SC;

					.iconfont {
						margin-top: 32rpx;
					}
				}

				.flexRightText {
					width: 100%;
					height: 218rpx;
					background: #F4F4F4;
					border-radius: 6rpx;
					padding: 10rpx 20rpx;

					.textarea {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						display: block;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.zw {
		width: 100%;
		height: 206rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 136rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;

		.footerBtn {
			width: 504rpx;
			height: 64rpx;
			background: #4CBD66;
			border-radius: 10rpx;
			text-align: center;
			line-height: 64rpx;
			margin: 30rpx auto;
			color: #fff;
		}
	}

	.tips {
		background-color: rgba(255, 0, 0, 0.1);
		padding: 10rpx 0;
		text-align: center;
		color: #f00;
		font-size: 26rpx;

		&.color1 {
			background-color: rgba(76, 189, 102, 0.1);
			color: #4CBD66;
		}
	}
</style>